<html>

<head>
    <title>cloud</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Bootstrap?action=raw&amp;ctype=text/css" rel="stylesheet">
    <script src="https://2021.igem.org/Team:SZPT-CHINA/JS/Bootstrap&action=raw&ctype=text/javascript"></script>
    <script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"> -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
</head>

<body class="mw-content-ltr" data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">

    <div class="container-fluid p-5 bg-primary text-white text-center" style="    margin-top: 38px;">
        <h1>cloud毕业🎓啦！<span class="badge bg-secondary">cloud</span></h1>
        <p>宇宙很大，生活更大，也许以后还有缘相见。</p>
    </div>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" style="margin-top: 10px;font-size: 24px">
        <div class="container-fluid">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#section1">图片</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#section2">感动</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#section3">废话</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container mt-5">
        <div id="section1" class="container-fluid" style="padding:100px 20px;">
            <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">折叠</button>
            <div id="demo" class="collapse show">

                <!-- Carousel -->
                <div id="demo1" class="carousel slide" data-bs-ride="carousel">

                    <!-- Indicators/dots -->
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#demo1" data-bs-slide-to="0" class="active"></button>
                        <button type="button" data-bs-target="#demo1" data-bs-slide-to="1"></button>
                        <button type="button" data-bs-target="#demo1" data-bs-slide-to="2"></button>
                    </div>

                    <!-- The slideshow/carousel -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://2021.igem.org/wiki/images/9/94/T--SZPT-CHINA--cloud-4.png" class="d-block" style="width:100%;height: 70%">
                            <div class="carousel-caption">
                                <h3>景很美</h3>
                                <p>相信最好的你！</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://2021.igem.org/wiki/images/8/80/T--SZPT-CHINA--cloud-5.png" class="d-block" style="width:100%;height: 70%">
                            <div class="carousel-caption">
                                <h3>被绑架</h3>
                                <p>眨眨眼！</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://2021.igem.org/wiki/images/9/91/T--SZPT-CHINA--cloud-6.png" class="d-block" style="width:100%;height: 70%">
                            <div class="carousel-caption">
                                <h3>天</h3>
                                <p>我就是我！</p>
                            </div>
                        </div>
                    </div>

                    <!-- Left and right controls/icons -->
                    <button class="carousel-control-prev" type="button" data-bs-target="#demo1" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#demo1" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
                </div>


                <div class="row">
                    <div class="col-sm-4">
                        <h3>No.1</h3>
                        <p>
                            <image class="img-fluid rounded" src="https://2021.igem.org/wiki/images/d/d3/T--SZPT-CHINA--cloud-1.png"></image>
                        </p>
                        <p class="text-primary picP text-center">手拿太阳！！！</p>
                    </div>
                    <div class="col-sm-4">
                        <h3>No.2</h3>
                        <p>
                            <image class="img-fluid rounded-circle" src="https://2021.igem.org/wiki/images/f/f9/T--SZPT-CHINA--cloud-2.png"></image>
                        </p>
                        <p class="text-muted picP text-center">拥抱太阳！！！</p>
                    </div>
                    <div class="col-sm-4">
                        <h3>No.3</h3>
                        <p>
                            <image class="img-fluid rounded" src="https://2021.igem.org/wiki/images/1/1b/T--SZPT-CHINA--cloud-3.png"></image>
                        </p>
                        <p class="text-info picP text-center">远望大运！！！</p>
                    </div>
                </div>

            </div>
            <div id="section2" class="container-fluid" style="padding:100px 20px;">
                <div class="alert alert-success">
                    <strong>成功!</strong> 夏天的遇见就在夏天告别吧。
                </div>
                <div class="alert alert-info">
                    <strong>信息!</strong> 书上说，天下没有不散的宴席；不要怕，书上还说，人生何处不相逢。 。
                </div>
                <div class="alert alert-warning">
                    <strong>警告!</strong> 离别不是友谊的分散，而是力量的扩张。只愿，他日相见，清风朗月，把酒言欢。。
                </div>
                <div class="alert alert-danger">
                    <strong>错误!</strong> 那就好好道个别吧，和课桌黑板，操场食堂，和吹过教室走廊的最后那一阵风，和那某一段一去不回的青春。
                </div>
                <div class="alert alert-primary">
                    <strong>首选!</strong> 可曾记得高中某个安静的傍晚，教室里空荡荡，这里等待着新的一批人，大家相互告别以后各自努力，甚至再也不会见面。
                </div>
                <div class="alert alert-secondary">
                    <strong>次要的!</strong> “何日功成名遂了，还乡，醉笑陪公三万场”。
                </div>
                <div class="alert alert-dark">
                    <strong>深灰色!</strong> 你总说毕业遥遥无期，转眼就各奔东西。
                </div>
            </div>
            <!--    <div class="alert alert-light">-->
            <!--        <strong>浅灰色!</strong>浅灰色提示框。-->
            <!--    </div>-->
            <div id="section3" class="container-fluid" style="padding:100px 20px;">
                <button type="button" class="btn btn-primary btn-lg">你开心吗
            </button>
                <button type="button" class="btn btn-primary active">你快乐吗
            </button>
                <button type="button" class="btn btn-primary btn-sm">你高兴吗
            </button>
                <a href="#" class="btn btn-primary disabled">你伤心吗</a>


                <h2 style="background-color: white" class="text-center picP">大学进度</h2>
                <div class="progress">
                    <div class="progress-bar" style="width:99%">99%</div>
                    <div class="spinner-border"></div>
                </div>
                <br>
                <div class="card bg-warning text-white">
                    <div class="card-body">警告:你有认真看🐎</div>
                </div>
                <div class="dropdown">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                    下拉
                </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">2019</a></li>
                        <li><a class="dropdown-item" href="#">2020</a></li>
                        <li><a class="dropdown-item" href="#">2021</a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">对对对！</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- 模态框内容 -->
                <div class="modal-body">
                    那就好
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">快点击我，关闭</button>
                </div>

            </div>
        </div>
    </div>
</body>
<style>
    /** Begin-igem特有 **/
    
    #sideMenu,
    #top_title,
    .patrollink,
    #firstHeading,
    #home_logo,
    #sideMenu {
        display: none;
    }
    
    #content {
        padding: 0px;
        width: 100%;
        margin-top: -7px;
        margin-left: 0px;
        border: none;
    }
    
    body,
    html {
        width: 100%;
        height: 100%;
        font: 11.7px sans-serif;
        font-family: 'Quicksand', sans-serif;
    }
    
    #bodyContent h1,
    #bodyContent h2,
    #bodyContent h3,
    #bodyContent h4,
    #bodyContent h5 {
        margin-bottom: 0px;
    }
    
    #bodyContent a[href ^="https://"],
    .link-https {
        padding-right: 25px;
    }
    
    .mw-content-ltr {
        background-image: url("https://2021.igem.org/wiki/images/4/45/T--SZPT-CHINA--cloud-bg.png");
        background-position: center 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
    }
    /** END-igem特有 **/
    
    .picP {
        background-color: white;
        border-radius: 10px;
        text-align: center
    }
</style>

</html>